<template>
  <div class="amazing-wrap">
    <el-card>
      <el-button size="mini" type="primary" @click="goAdd"></el-button>
      <br /><br />
      <el-dialog title="" :visible.sync="addVisible" width="30%">
        <el-form>
          <el-form-item label="图片预览">
            <el-image
              :src="baseImg + model.carouselUrl"
              style="width: 150px; height: 100px"
              fit="cover"
            />
          </el-form-item>
          <el-form-item label="上传图片">
            <input type="file" accept="image/*" @change="uploading" />
          </el-form-item>
        </el-form>
        <span slot="footer">
          <el-button size="mini" @click="addVisible = false">取 消</el-button>
          <el-button size="mini" type="primary" @click="confirm"
            >确定</el-button
          >
        </span>
      </el-dialog>
      <span class="tips"></span>
      <el-table
        v-loading="tableLoading"
        :data="tableData"
        size="mini"
        border
        stripe
      >
        <el-table-column label="图片" align="center">
          <template slot-scope="scope">
            <el-image
              style="width: 150px; height: 100px"
              fit="cover"
              :src="baseImg + scope.row.carousel"
              :preview-src-list="[baseImg + scope.row.carousel]"
            />
          </template>
        </el-table-column>
        <el-table-column align="center" label="创建时间" width="200px">
          <template slot-scope="scope">
            {{ $moment(scope.row.create_time).format("yyyy-MM-DD HH:mm:ss") }}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      addVisible: false,
      tableLoading: false,
      model: {
        carouselUrl: "",
      },
      baseImg: process.env.VUE_APP_IMG_URL,
      tableData: [],
      // picture list,there is a image what I need, type = 6 is what i need
      pictureList: [
        {},
        {},
        {},
        {},
        {},
        {
          imageUrl: "",
        },
      ],
    };
  },
  mounted() {
    this.getPicList();
  },
  methods: {
    async getPicList() {
      this.tableLoading = true;
      try {
        const { data } = await this.$http.getFirstBanner();
        this.tableData = data;
      } catch (e) {
        this.tableLoading = false;
      }
      this.tableLoading = false;
    },

    async updateBottom(imageUrl) {
      await this.$http.setFirstBottom({
        type: 6,
        imageUrl,
      });
    },
    goAdd() {
      this.model = {
        carouselUrl: "",
      };
      this.addVisible = true;
    },
    async confirm() {
      if (!this.model.carouselUrl) {
        return this.$message.info("请先上传图片");
      }
      await this.$http.addFirstBanner({
        carousel: this.model.carouselUrl,
      });
      this.$message.success("上传成功");
      this.addVisible = false;
      this.getPicList();
    },
    async sort(type, index) {
      const back = this.tableData;
      if (type === 1 && index !== 0) {
        await this.$http.setFirstBanner({
          id: back[index].id,
          carouselRank: back[index - 1].carouselRank,
        });
        await this.$http.setFirstBanner({
          id: back[index - 1].id,
          carouselRank: back[index].carouselRank,
        });
        this.$message.success("更改排序成功");
        this.getPicList();
      } else if (type === 2 && index !== this.tableData.length - 1) {
        await this.$http.setFirstBanner({
          id: back[index].id,
          carouselRank: back[index + 1].carouselRank,
        });
        await this.$http.setFirstBanner({
          id: back[index + 1].id,
          carouselRank: back[index].carouselRank,
        });
        this.$message.success("更改排序成功");
        this.getPicList();
      }
    },
    handleDelete(id) {
      this.$confirm("此操作将永久删除该轮播图, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          await this.$http.deleteFirstBanner({ id });
          this.$message.success("删除成功");
          this.getPicList();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    async uploading(e) {
      if (e.target.files.length === 0) {
        return;
      }
      const formData = new FormData();
      formData.append("file", e.target.files[0]);
      const data = await this.$http.upload(formData);
      this.model.carouselUrl = data.filename;
    },
  },
};
</script>

<style lang="scss" scoped>
.title {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #eee;
}

.upload {
  position: relative;
  #upload {
    position: absolute;
    width: 400px;
    height: 250px;
    z-index: 1;
    opacity: 0;
    cursor: pointer;
  }
  #preview {
    position: absolute;
    width: 500px;
    height: 250px;
    z-index: 0;
    #info {
      height: 100%;
      border-radius: 10px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 20px;
      font-weight: 500;
      border: 1px solid #ccc;
      img {
        position: absolute;
        height: 100%;
        width: 100%;
        z-index: 1;
        object-fit: cover;
      }
      .up {
        font-size: 30px;
        font-weight: 600;
        color: #999;
        position: absolute;
        z-index: 0;
      }
    }
  }
}
.el-card {
  min-height: 600px;
}

.link {
  margin-top: 250px;
  width: 500px;
}
.tips {
  line-height: 40px;
}
</style>
